<template>
  <!-- 自定义流程图 -->
  <div class="new-approval-map">
    <!-- <h2 class="map-title">审批进度</h2> -->
    <div class="map-node" v-for="(item, index) in confArr" :key="item.id">
      <div
        :class="
          item.completion != 0
            ? 'dui_style map-left-line'
            : item.type != 1
            ? 'map-left-line no_style'
            : 'map-left-line'
        "
      >
        <!-- 审核完和审核未完成的图标表示不一致 -->
        <!-- <span title="宫本武藏" class="line-name" v-if="item.completion == 0">{{
          item.userName.slice(-2)
        }}</span> -->
        <i
          v-if="item.completion == 0"
          :class="
            item.type != 1
              ? 'el-icon-collection-tag crecle_style'
              : 'el-icon-loading'
          "
          style="font-size: 24px; color: #fff"
        ></i>
        <i
          class="ym-custom ym-custom-check-circle"
          v-if="item.completion != 0"
          style="font-size: 44px; color: #2d8cf0"
        ></i>

        <!-- 头像下小图标 -->
        <!-- <span
          class="line-complete-icon"
          v-if="item.completion != 0 || item.completion == 1"
        >
          <i class="ym-custom ym-custom-check-circle"></i>
        </span> -->
        <!-- <i class="icon2_ icon2_shenpiguanli line-icon"></i> -->
      </div>
      <div class="map-right-content">
        <div class="item-cell">
          <!-- 右侧时间，暂时无数据 -->
          <div class="item-label">
            <span class="label-name">{{ item.nodeName }}</span>
            <!-- <span class="label-time">{{
              jsbos.toDate(item.creatorTime)
            }}</span> -->
          </div>
          <div class="item-node">
            <span :class="['node-name', 'active']">{{
              item.userName.slice(-2)
            }}</span>
            <span v-if="item.completion != 0" class="is-complete-icon"
              ><i class="ym-custom ym-custom-check-circle complete-icon"></i
            ></span>

            <!-- type 为待处理当前节点  展示不同的颜色 -->
            <span
              v-if="item.type == 1"
              :class="
                item.type == 1 ? ['node-status', 'send'] : ['node-status']
              "
            >
              {{ item.userName }}
              <span style="font-size: 12px">(审批中)</span>
            </span>

            <span
              v-else
              :class="
                item.completion != 0
                  ? ['node-status', 'agree']
                  : ['node-status']
              "
            >
              {{
                item.userName ||
                (item.nodeName != "结束" ? "未匹配到审核人" : "流程结束")
              }}
              <span
                style="font-size: 12px"
                v-if="
                  item.completion != 0 && index != 0 && item.nodeName != '结束'
                "
                >(审批完成)</span
              >

              <span style="font-size: 12px" v-else>
                <span v-show="item.nodeName != '结束' && index != 0"
                  >(待审批)</span
                >
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="confArr.length == 0" style="padding-top: 20px">
      <el-divider content-position="left"
        >暂无当前审批节点,点击右侧按钮查看当前审批全部流程!</el-divider
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["conf"],
  computed: {
    confArr() {
      console.log("conf", this.conf);
      let arr = this.conf;
      if (arr.length > 0) {
        if (
          arr[arr.length - 2].type == 0 &&
          arr[arr.length - 2].completion == 1
        ) {
          arr[arr.length - 1].type = 0;
          arr[arr.length - 1].completion = 1;
        }
      }

      return arr;
    },
  },
  mounted() {
    // setTimeout(() => {
    //   this.$nextTick(() => {
    //     console.log("======", this.conf);
    //   });
    // }, 500);
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.new-approval-map {
  .map-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }

  .map-node {
    display: flex;
    position: relative;

    .map-left-line {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #2d8cf0;
      font-size: 8px;
      color: #fff;
      // text-align: center;
      // line-height: 40px;

      display: flex;
      justify-content: center;
      align-items: center;

      // overflow: hidden;
      // position: relative;
      .line-name {
        font-size: 12px;
      }

      .line-icon {
        font-size: 22px;
      }

      .line-complete-icon {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        text-align: center;
        line-height: 16px;
        background-color: #3fba73;
        position: absolute;
        left: 25px;
        top: 25px;

        .complete-icon {
          color: #fff;
        }
      }

      &.send {
        background-color: #ffba02;
      }

      // 自定义流程虚线
      &::before {
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        background-color: #e4dfdf;
        z-index: -1;
        position: absolute;
        left: 18px;
        top: 0px;
      }
    }

    &:last-child {
      .map-left-line {
        &::before {
          display: none;
        }
      }
    }

    .map-right-content {
      position: relative;
      width: 100%;
      margin: 12px 0 0 17px;
      font-size: 14px;

      .item-cell {
        position: relative;
        top: -22px;
        left: 10px;
        background-color: #fff;
        border-radius: 6px;
        padding: 12px 16px;
        box-shadow: 1px 1px 4px #c8ddf3;

        .item-label {
          line-height: 1;
          display: flex;
          justify-content: space-between;

          .label-name {
            font-size: 15px;
            font-weight: bold;
            color: #333;
          }

          .label-time {
            font-size: 13px;
            font-weight: bold;
            color: #b9b9b9;

            .label-status {
              padding: 0 10px;
            }
          }
        }

        .item-node {
          display: flex;
          align-items: center;

          margin: 10px 0;

          .node-name {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #2d8cf0;
            font-size: 8px;
            color: #fff;
            text-align: center;
            line-height: 30px;
            overflow: hidden;
            position: relative;
          }

          .is-complete-icon {
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            text-align: center;
            line-height: 16px;
            background-color: #3fba73;
            position: absolute;
            left: 35px;
            top: 55px;
            display: flex;
            justify-content: center;
            align-items: center;

            .complete-icon {
              color: #fff;
            }
          }

          .node-status {
            color: #666;
            padding-left: 10px;

            &.agree {
              // 同意样式
              color: #3fba73;
            }

            &.reject {
              // 拒绝样式
              color: #e76060;
            }

            &.pend {
              // 待审批样式
              color: #fa795e;
            }

            &.recall {
              // 撤回
              color: orange;
            }

            &.send {
              // chaoso
              color: #2d8cf0;
            }
          }
        }

        .item-status-content {
          line-height: 1.5;
        }

        &::before {
          content: "";
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-right: 12px solid #edf6ff;
          border-bottom: 11px solid transparent;
          position: absolute;
          left: -13px;
          top: 20px;
        }
      }
    }
  }
}

.dui_style {
  background-color: white !important;
}

.no_style {
  background-color: #cfc5c5 !important;
}

.crecle_style {
  color: #666;
}
</style>
